<!-- 查看单一投票详情 -->
<template>
  <div class="voteShow">
    <!--  投票人内容 -->
    <van-collapse v-model="activeNames" v-if="voteUserList.length!=0">
      <van-collapse-item name="1">
        <template #title>
          <div>
            投票详情
            <van-icon name="question-o" />
          </div>
        </template>

        <van-grid :gutter="10" :border="true">
          <van-grid-item v-for="(item,index ) in voteUserList " :key="index">
            <el-image style="width: 50px; height: 50px" :src="item.avatar"></el-image>
          </van-grid-item>
        </van-grid>
        <!-- 数据分析 -->

        <van-cell style="margin-top:0.5rem;" title="选项分析" value="数据占比" />
        <div v-for="( value, key ,index) in optionMap " :key="index" style="margin-top:3px;">
          <span>
            选项:
            <van-tag plain type="primary" size="medium">{{checked[index]}}</van-tag>
          </span>
          <el-progress
            :percentage="Number(Number((value/selectPeople)*100).toFixed(2))>100 ? 100 :  Number(Number((value/selectPeople)*100).toFixed(2))"
          ></el-progress>
          {{value}}人选择
        </div>
      </van-collapse-item>
    </van-collapse>
    <el-empty v-else description="暂无投票信息"></el-empty>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
    },
  },
  watch: {
    id: function (params) {
      this.voteInfoId = params
      this.getvote()
    },
  },
  data() {
    return {
      voteInfo: [], // 投票信息
      currentUserId: this.$store.getters.getUserInfo.id,
      checked: [], // 单选项
      voteInfoId: '', // 当前投票的id
      activeNames: ['1'],
      voteIndex: 0, // 当前用户投票的索引值
      voteUserList: [], // 当前票的所有投票人信息
      optionList: [], //选项的内容列表
      optionMap: {}, // 选择的人数及选项
      selectPeople: 0,
      flag: false,
    }
  },
  created() {
    this.voteInfoId = this.id
    this.getvote()
  },
  methods: {
    // 获取当前选票投票人的信息

    async getvote() {
      const res = await this.$axios.get(
        '/vote/info/' + this.id + '?userId=' + this.currentUserId
      )
      if (res.data.code == 200) {
        this.voteUserList = res.data.data.voteUserList
        this.voteIndex = res.data.data.voteIndex
        this.optionList = res.data.data.optionList
        this.optionMap = res.data.data.optionMap

        if (this.voteIndex) {
          for (let j = 0; j < this.voteIndex.length; j++) {
            this.checked.push(this.optionList[this.voteIndex[j]])
          }
        } else {
        }
        if (this.optionMap) {
          this.selectPeople = Object.keys(this.optionMap).length
        }
      }
    },
  },
}
</script>

<style scoped>
.voteShow {
  margin-top: 46px;
}
.voteShow_div {
  padding: 10px;
}
.voteShow_div_li1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 16px;
  color: #445588;
}
.voteShow_div_li1 > div > img {
  height: 60px;
  width: 60px;
}
.voteShow_div_li1_div2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 16px;
  justify-content: space-around;
  /* justify-content: center; */
  align-items: center;
}
.voteShow_div_li1_div2 > p:first-child {
  font-weight: bold;
  color: #304d80;
}
.voteShow_div_li1_div2 > p {
  padding-left: 10px;
  width: 100%;
}

/* 标题 */
.voteShow_div_li2 {
  font-size: 18px;
  margin-top: 0.6rem;
}

.voteShow_div_li3 {
  padding-top: 10px;
  font-size: 12px;
}
.voteShow_div_li5 {
  font-size: 1em;
  color: #94b4eb;
}
</style>
